<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/commons/taglibs.jsp"%>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-us">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrom=1">
	<meta http-equiv="Cache-Control" content="no-store"/>
	<meta http-equiv="Pragma" content="no-cache"/>
	<meta http-equiv="Expires" content="0"/>
 	<%@ include file="../base.jsp" %>
	<title>添加人员</title>
	
	<script type="text/javascript">
	$(function(){
		/**
		**下拉框样式
		**/
		$(".chzn-select-deselect").chosen({allow_single_deselect:true});
		$(".chzn-select-nosearch").chosen({disable_search:true});
		$(".chzn-select").chosen();
		var zidx = 100;
		$('.chzn-container').each(function(){
		$(this).css('z-index', zidx);
		zidx-=1;
		});
		
		/**开关按钮**/
		// 1  男  2女 
        $("#sex_switch").bootstrapSwitch();
        $("#sex").val("2");
    	$("#sex_switch").bootstrapSwitch('state',false, false);
	    $("#sex_switch").on('switchChange.bootstrapSwitch', function(event, state) {
	        	if (state==true){
	        	    $("#sex").val("1");  
	        	}else{
	        		$("#sex").val("2"); 
	        	}
	        });
	    /**开关按钮end**/
	});
	function checkUserName(id){
		$.ajax({
	 	   	  type:"post",
	 	   	  url:"${ctx}/home/checkUserName.do",
	 	   	  data:{login_name:$("input[id="+id+"]").val()},
	 	   	  success:function(data){
	 	   		  if(data=="no"){
	 	   			$("span[id="+id+"]").text($("input[id="+id+"]").val()+"已经存在！");
	 	   		  }else{
	 	   			$("span[id="+id+"]").text("");
	 	   		  }
	 	   	  }
	 	});
	}
	
    function subdata(){
    	if($("span[id=loginName]").text()!="") return;
        if(!$("#signupForm").form('validate')){
            return false;
        }else{
        	$("#submitButton").attr("disabled","true").addClass("grayButton");
            $("#signupForm").submit();
        }
    }
    function selectChange(){
    	var htmlInput='<tr id="login">	'+
    	'	<td class="tit"><span style="color: red"> * </span>登录名：</td>'+
    	'	 <td> '+
    	'		 <input id="loginName" name="loginName" Class="easyui-validatebox txt w20" maxlength="100" '+
    	'			data-options="required:true,validType:'+'length[0,100]'+'" onblur="checkUserName(this.id)"> '+
    	'		 <span style="color: red" id="loginName" ></span> '+
    	'	 </td> '+
    	'</tr>';
    	
    	if($("select[id=role]").val()==1){ if($("tr[id=login]").length!=0) $("tr[id=login]").remove();}
    	else{ if($("tr[id=login]").length==0){$("table[class=form]").append(htmlInput);}}

    }
    function doReturn(){
		if(confirm("数据将不会被保存！")){
			//如果是true，页面返回index页面
			location.href="${ctx}/home/userList.do";
		}else{
			//如果是false，页面不做处理
		}
	}
	</script>
</head>
<body>
  <div class="con_wrap">
	  	<%@ include file="../head.jsp" %>
	     <div id="main">
	        <form id="signupForm" action="${ctx}/home/AddUser.do" method="POST" autocomplete="off">
	        <dl class="section_wrap">
		         <dt> <h2>人员信息</h2></dt>
					<table class="form">
						<tbody>
							<tr>
						    	<td class="tit"><span style="color: red"> * </span>名　字：</td>
								<td><input id="name" name="name"  
									Class="easyui-validatebox txt w20" maxlength="100"
									data-options="required:true,validType:'length[0,100]'"> </td> 
								
								<td class="tit"><span style="color: red"> * </span>身份证：</td>
							   	<td><input id="cardId" name="cardId"  
									Class="easyui-validatebox txt w20" maxlength="100"
									data-options="required:true,validType:'length[0,100]'">
								</td>
							</tr>
							<tr>
						    	<td class="tit"><span style="color: red"> * </span>邮　箱：</td>
								<td><input id="email" name="email" Class="easyui-validatebox txt w20" > </td> 
								
								<td class="tit"><span style="color: red"> * </span>地　址：</td>
							   	<td><input id="addr" name="addr" Class="easyui-validatebox txt w20" >
								</td>
							</tr>
							<tr>
								<td class="tit"><span style="color: red"> * </span>性　别：</td>
							   	<td><input type="checkbox" id="sex_switch" data-size="mini"data-on-text="男" data-off-text="女">  
									<input type="hidden" id="sex" name="sex" />
								</td>
				       		
								<td class="tit"><span style="color: red"> * </span>角　色：</td>
								<td class="SELECT">
									<select  id="role" name="role" onchange="selectChange()" class="chzn-select-deselect w20" data-placeholder="Choose a role...">
											<option value=""></option>
											<c:forEach items="${roleList }" var="role">
												<option value="${role.id}">${role.role}</option>
											</c:forEach>
									</select>
								</td>
							</tr>
							<tr>	
							<td class="tit"><span style="color: red"> * </span>电　话：</td>
							   	<td><input id="tel" name="tel"  
									Class="easyui-validatebox txt w20" maxlength="100"
									data-options="required:true,validType:'length[0,100]'">
								</td>
						   </tr>
							<tr id="login">	
								<td class="tit"><span style="color: red"> * </span>登录名：</td>
								 <td> 
									 <input id="loginName" name="loginName" Class="easyui-validatebox txt w20" maxlength="100"
										data-options="required:true,validType:'length[0,100]'" onblur="checkUserName(this.id)">
								 	 <span style="color: red" id="loginName" ></span>
								 </td>
						   </tr>	       		
				 		</tbody>
					</table>
	      </dl>
	      <table width="100%" style="margin-top: 15px">
	          <tbody>
		           <tr class="bottom">
		               <td width="40%">&nbsp;</td>
		               <td align="right">
		                  <input class="button blue" id="submitButton" name="submitButton" type="button" onclick="subdata();" value="保存">
		                 <input class="button grey" type="button" onclick="doReturn()" value="关闭"></td><!-- onclick="window.close()"  -->
		           </tr>
	     	   </tbody>
	     </table>
	 </form>
	</div>
<div style="height: 200px;">
</div>
	<div id="footer">
		<%@ include file="../footer.jsp" %>
	</div>
</div>
</body>
</html>	